<template>
  <view class="login-container" :style="{height: windowHeight + 'px'}">
    <!-- 背景装饰元素 -->
    <view class="bg-decorations">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>
    
    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- Logo -->
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      
      <!-- 标题 -->
      <text class="title">欢迎登录</text>
      <text class="subtitle">请输入您的学号和密码</text>
      
      <!-- 表单 -->
      <u-form :model="form" :rules="rules" ref="uForm" class="form">
        <u-form-item label="学号" prop="userId" required label-width="150">
          <u--input 
            v-model="form.userId" 
            focus 
            maxlength="20"
            placeholder="请输入学号"
            border="none"
            @focus="handleInputFocus('userId')"
            @blur="handleInputBlur('userId')"
          >
            <template #prefix>
              <u-icon name="account" size="20" color="var(--neutral-medium)"></u-icon>
            </template>
          </u--input>
        </u-form-item>
        
        <u-form-item label="密码" prop="password" required label-width="150">
          <u--input 
            v-model="form.password" 
            type="password" 
            maxlength="20" 
            password-icon
            placeholder="请输入密码"
            border="none"
            @focus="handleInputFocus('password')"
            @blur="handleInputBlur('password')"
          >
            <template #prefix>
              <u-icon name="lock" size="20" color="var(--neutral-medium)"></u-icon>
            </template>
          </u--input>
        </u-form-item>
      </u-form>
      
      <!-- 登录按钮 -->
      <u-button 
        @click="login" 
        type="primary" 
        shape="circle" 
        class="login-btn"
        :loading="loading"
        :custom-style="btnStyle"
        hover-class="btn-hover"
      >
        登 录
      </u-button>
      
      <!-- 底部链接 -->
      <view class="footer-links">
        <text class="link-text">忘记密码</text>
        <text class="link-divider">|</text>
        <text class="link-text">注册账号</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        windowHeight: 0,
        form: {
          userId: '',
          password: '',
        },
        rules: {
          userId: [{
            required: true,
            message: '请输入学号',
            trigger: ['change', 'blur'],
          }],
          password: [{
            required: true,
            min: 3,
            message: '密码不能少于3个字',
            trigger: ['change', 'blur']
          }]
        },
        loading: false,
        activeInput: null
      }
    },
    computed: {
      btnStyle() {
        return {
          background: `linear-gradient(45deg, ${this.loading ? 'var(--primary-dark)' : 'var(--primary-morandi)'}, var(--primary-dark))`,
          color: 'var(--neutral-white)',
          fontSize: 'var(--font-size-lg)',
          height: '90rpx',
          marginTop: '60rpx',
          boxShadow: '0 4rpx 12rpx rgba(122, 155, 181, 0.3)'
        }
      }
    },
    mounted() {
      this.getWindowHeight()
    },
    methods: {
      getWindowHeight() {
        uni.getSystemInfo({
          success: (res) => {
            this.windowHeight = res.windowHeight
          }
        })
      },
      handleInputFocus(field) {
        this.activeInput = field
      },
      handleInputBlur(field) {
        if (this.activeInput === field) {
          this.activeInput = null
        }
      },
      login() {
        this.loading = true
        this.$refs.uForm.validate().then(res => {
          this.$lApi({
            url: '/login/verificate',
            method: 'POST',
            data: this.form
          }).then((res) => {
            this.loading = false
            if (res["code"] == this.$code.SUCCESS_CODE) {
              uni.setStorageSync("lesson-userId", this.form.userId)
              uni.showToast({
                title: '登录成功',
                icon: 'success',
                duration: 1500,
                success: () => {
                  setTimeout(() => {
                    uni.switchTab({
                      url: '/pages/lession/lession'
                    })
                  }, 1500)
                }
              })
            } else {
              this.$u.toast(res["msg"])
            }
          }).catch(err => {
            this.loading = false
            console.log(err)
            this.$u.toast('登录失败')
          })
        }).catch(errors => {
          this.loading = false
          this.$u.toast('请填写完整信息')
        })
      }
    }
  }
</script>

<style lang="less">
  .login-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--neutral-white);
    overflow: visible;
    
    .bg-decorations {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      
      .circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(122, 155, 181, 0.1);
        animation: fadeIn 1s forwards;
        
        &-1 {
          width: 600rpx;
          height: 600rpx;
          top: -200rpx;
          left: -200rpx;
          animation-delay: 0.2s;
        }
        
        &-2 {
          width: 400rpx;
          height: 400rpx;
          bottom: -100rpx;
          right: -100rpx;
          animation-delay: 0.4s;
        }
        
        &-3 {
          width: 300rpx;
          height: 300rpx;
          top: 50%;
          right: -50rpx;
          animation-delay: 0.6s;
        }
      }
    }
    
    .login-card {
      width: 85%;
      max-width: 650rpx;
      padding: 60rpx 50rpx;
      background-color: var(--neutral-white);
      border-radius: 24rpx;
      box-shadow: 0 10rpx 30rpx rgba(33, 37, 41, 0.1);
      z-index: 2;
      animation: cardEnter 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }
    
    .logo {
      width: 150rpx;
      height: 150rpx;
      margin: 0 auto 40rpx;
      display: block;
      border-radius: 50%;
      box-shadow: 0 8rpx 20rpx rgba(122, 155, 181, 0.2);
    }
    
    .title {
      display: block;
      text-align: center;
      font-size: var(--font-size-xl);
      color: var(--neutral-black);
      font-weight: var(--font-weight-bold);
      margin-bottom: 10rpx;
    }
    
    .subtitle {
      display: block;
      text-align: center;
      font-size: var(--font-size-sm);
      color: var(--neutral-medium);
      margin-bottom: 60rpx;
    }
    
    .form {
      .u-form-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid var(--neutral-light);
        transition: all 0.3s ease;
        
        &:focus-within {
          border-bottom-color: var(--primary-morandi);
        }
      }
      
      .u-input {
        padding: 20rpx 0;
      }
    }
    
    .login-btn {
      transition: all 0.3s ease;
      
      &.btn-hover {
        transform: translateY(-2rpx);
        box-shadow: 0 6rpx 16rpx rgba(122, 155, 181, 0.4) !important;
      }
    }
    
    .footer-links {
      display: flex;
      justify-content: center;
      margin-top: 40rpx;
      
      .link-text {
        font-size: var(--font-size-xs);
        color: var(--neutral-medium);
        padding: 0 20rpx;
        
        &:active {
          color: var(--primary-morandi);
        }
      }
      
      .link-divider {
        font-size: var(--font-size-xs);
        color: var(--neutral-light);
      }
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes cardEnter {
    from {
      transform: translateY(50px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
</style>